<html>

<head>
    <title>HTML 文档结构 </title>
</head>

<body>
    <div class="group">
        <!--输入框 -->
        <input type="text" class="todovalue" name="todovalueName" id="todovalueId" placeholder="请输入todo内容"
            onkeydown="valueChange(event)" />
        <!--<input type="button" value="BUTTON2" onclick="handleClick()"></input>-->
        <button type="button" id="button3">添加</button>
        <!-- 遍历数据 -->
        <div id="todoList">
           
         <!--  <div class="item" id="item0">
                <input class="item-chk" type ="checkbox" />
                <div class="item-sp">吃饭</div>
                <input id="item-del-0" class="item-del" type="button" value="删除" onclick="handleDelClick(0)" ></input>
            </div>

            <div class="item" id="item1">
                <input class="item-chk" type ="checkbox" />
                <div class="item-sp">睡觉</div>
                <input id="item-del-1" class="item-del" type="button" value="删除" onclick="handleDelClick(1)" ></input>
            </div>

            <div class="item" id="item2">
                <input class="item-chk" type ="checkbox" />
                <div class="item-sp">打豆豆</div>
                <input id="item-del-2" class="item-del" type="button" value="删除" onclick="handleDelClick(2)" ></input>
            </div>
        --> 
        </div>
        <!-- <span style="color: rgb(0, 0, 252)"
          >asd&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rts</span -->
      
      </div>
        </div>
        
        <!-- 操作的footer -->

    </div>
</body>

<script lang="javascript">
    var index = 0;

    function init() {
        document.getElementById("button3").onclick = handleClick;
        
        /*document.getElementById("input").keydown(function (event) {
            if (event.keyCode == 13) {
                document.getElementById("todovalueId").value;
                console.log(v);
            }
        })*/


    }
    function valueChange(e) {
        console.log(e);
        if (event.keyCode == 13) {
            handleClick();
        }
    }
    function handleClick() {
        var temp = document.getElementsByName("todovalueName")[0].value;
        // alert("我被按了" + temp);
        // var t = document.getElementById("todoList").innerHTML;
        // document.getElementById("todoList").innerHTML = t + "<div>" + temp + "</div>";
        var div = document.createElement("div");
        // div.innerText = temp;

        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"

        index++;
        // div.innerHTML
        // document.getElementById("todoList").innerHTML += div;
        document.getElementById("todoList").innerHTML += t
    }
    function test1(index) {
        //console.log("test12111");
        // document.getElementById("todoList").children[index].style = "background-color:red";
        // document.getElementById("item-del-" + index).style = "opacity:1;";
    }
    function test2(index) {
        // console.log("222222222");
        //document.getElementById("todoList").children[index].style = "";
        // document.getElementById("item-del-" + index).style = "opacity:0;";

    }
    function handleDelClick(index) {
        var arr = document.getElementById("todoList");
        console.log(arr);
        document.getElementById("item" + index).remove();
    }
    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .group {
        border: 1px solid blue;
        padding: 20px;

        border-radius: 8px;
       
    }
/* sass less */
    .item{
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }

    .item:hover{
        background-color: aqua;

        transform: scale(1.2);
       
    }

    .item-sp{
        flex-grow: 1;
    }

    .item-del{
        background-color: red;
        border: 0px;
        color: aliceblue;

        opacity: 0;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .todovalue{
        border: 1px solid rgb(19, 16, 16);
        margin: 1.5px;
        padding: 6px;
      
    }
    .todovalue:focus{
       box-shadow: 0px 0px 9px #4086cd;
       border: 2px solid #4086cd;
       margin: 0px;
       outline: none;
    }

</style>

</html>